<template lang="">
  <div class="">
    <pageTole>
      <el-button slot="after" type="primary" style="margin-right: 30px;" size="mini"
        @click="addPermission('0',1)">添加权限</el-button>
    </pageTole>
    <el-table :data="tableData" default-expand-all row-key="id" :tree-props="{children: 'children'}" border>
      <el-table-column prop="name" align="center" label="名称" />
      <el-table-column prop="code" align="center" label="标识" />
      <el-table-column prop="description" align="center" label="描述" />
      <el-table-column label="操作" width="300">
        <template v-slot="{row}">
          <el-button v-if="row.type === 1" type="text" @click="addPermission(row.id,2)">添加</el-button>
          <el-button type="text" @click="editPermission(row.id)">编辑</el-button>
          <el-button type="text" @click="delPermission(row.id)"> 删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <PerSon :showText="showText" :pid="pid" :type1="type" @update="getPermissionList" :userId="userId" ref="person"
      :showDialog.sync="showDialog"></PerSon>
  </div>
</template>
</pageTole>
</div>
</template>
<!-- 写的很烂，不该封子组件   因为只有当前页面需要 -->
<script>
  import { getPermissionListAPI, delPermissionAPI } from '@/api'
  import { transTree } from '@/utils'
  import PerSon from './Per-Son'
  export default {
    data () {
      return {
        tableData: [],
        showDialog: false,
        showText: '',   //当前是编辑还是新增
        userId: null,   //传入子组件的id
        pid: "",
        type: 1
      }
    },
    components: { PerSon },
    created () {
      this.getPermissionList()
    },
    methods: {
      async getPermissionList () {
        const res = await getPermissionListAPI()
        this.tableData = transTree(res, '0')
      },
      // 编辑按钮
      async editPermission (id) {
        this.showDialog = true
        this.showText = '编辑'
        this.userId = id
        await this.$refs.person.getPermissionDetail(id)
      },
      // 新增按钮
      addPermission (id, type) {
        this.type = type
        this.pid = id
        this.showDialog = true
        this.showText = '新增'
      },
      // 删除按钮
      async delPermission (id) {
        await delPermissionAPI(id)
        this.getPermissionList()
      }
    },
  }
</script>
<style lang="">

</style>